<template>
    <div class="loan-info-page" v-if="!loading">

        <!-- 下载头部 -->
        <download></download>

        <!-- 应用头部 -->
        <!-- <mt-header class="page-header" fixed title="贷款详情">
        </mt-header>-->

        <div class="hedaer-mask">
            <div class="hedaer-bg-color"></div>
        </div>
        <div class="hedaer-bg-color"></div> 

        <!-- 正文 -->
        <div class="loan-info">
            <div class="loan-info-name">
                <!-- <div></div> -->
                <p>{{loan_details.loan_product_name}}</p>
            </div>

            <div class="loan-number">
                <div>
                    <span>额度范围（万元）</span>
                    <i style="color:#FD1F1F">{{loan_details.min_loan_money}}~{{loan_details.max_loan_money}}</i>
                </div>
                <div>
                    <span>月利率（元）</span>
                    <i>{{loan_details.month_rate}}%</i>
                </div>
            </div>

            <div class="loan-badge">
                <div v-for="item in zl_loan_tag_str" :key="item.id">
                    <span v-for="item in item" :key="item.id" >
                        <img src="./../assets/img/dkxq-xuanz.png" alt="" srcset=""/>
                        {{item}}
                    </span>
                </div>
            </div>
        </div>


        <div class="loan-mechanism">
            <p>
                <span>下款机构</span>
                <b>{{loan_details.loan_agency_name}}</b>
            </p>
            <p>
                <span>借款金额</span>
                <b @click="f_money">
                    <input type="text" v-model="loan_money" ref="is_f_m" @blur="money_our"/>
                    万元
                    <img src="../assets/img/dkxq-bj.png" alt="" srcset="">
                </b>
            </p>
            <p>
                <span>借款期限</span>
                <b @click="popup_dis">{{period}}个月</b>
            </p>

            <div class="loan-mechanism-chart">
                <ve-ring :tooltip-visible="false" :colors="colors" :data="chartData" :settings="chartSettings" ></ve-ring>
                <div class="loan-cost">
                    <span>
                        <i style="background-color: #479EF8;"></i>
                        到账金额：{{loan_money}}万元/{{period}}个月
                    </span>
                    <span>
                        <i style="background-color: #FF9A26;"></i>
                        利息：{{lx_free}}元（{{loan_details.month_rate}}%/月）
                    </span>
                    <span>
                        <i style="background-color: #ff0000;"></i>
                        一次性费用：{{one_free}}元
                    </span>
                </div>
            </div>

        </div>

        <div class="loan-adviser">
            <div class="main-title">
                服务顾问
            </div>
            <div class="conten" style="padding: 0">
                <div class="adviser-list">
                    <div class="adviser-list-info">
                        <img :src="loan_details.agent_admin_info.avatar!=''&&loan_details.agent_admin_info.avatar!=undefined?loan_details.agent_admin_info.avatar:'../assets/img/baozhengjin.png'" alt=""/>
                        <div class="adviser-info">
                            <p>
                                {{loan_details.agent_admin_info.real}}
                                <img  v-if="loan_details.agent_admin_info.is_bond==2" src="../assets/img/baozhengjin.png"  alt=""/>
                            </p>
                            <div class="lable-list">
                                <span v-if="loan_details.agent_admin_info.is_company==2">企业认证</span>
                                <span v-if="loan_details.agent_admin_info.is_real==2">实名认证</span>
                                <span v-if="loan_details.agent_admin_info.is_phone==2">手机认证</span>
                            </div>
                            <div class="star">
                                <div class="star-no" style="">
                                    <div class="star-yes" :style="'width:'+eavluate+'%'"></div>
                                    <i>{{eavluate/10}}</i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p>
                        <span>服务说明</span>
                        {{loan_details.agent_admin_info.service_ote}}
                    </p>
                </div>
            </div>
        </div>

        <!-- <div class="loan-process">
            <div class="main-title">
                贷款流程
            </div>

            <ly-tab
            v-model="selectedId"
            activeColor="#fff">
                <ly-tab-item>
                    <div class="loan-slide">
                        <img src="../assets/img/bank_img_flows.png" alt="" srcset="">
                    </div>
                </ly-tab-item>
            </ly-tab>
        </div> -->


        <div class="loan-explain">
            <div class="main-title">
                贷款详情
            </div>

            <div class="loan-explain-box">
                <!--文字内容  -->
                <pre>{{loan_details.loan_content_txt}}</pre>
                <!-- 图片内容 -->
                <img v-for="item in loan_content_img" :src="item" :key="item.id" alt="">
            </div>
        </div>


        <!-- <div class="loan-explain">
            <div class="main-title">
                还款说明
            </div>

            <div class="loan-explain-box">
                <div class="loan-ex-box-mini">
                    <label for="">还款方式</label>
                    <p>银行代扣：还款日当天08:00从绑定银行卡中自动扣款主动还款</p>
                </div>
                <div class="loan-ex-box-mini">
                    <label for="">还款方式</label>
                    <p>银行代扣：还款日当天08:00从绑定银行卡中自动扣款主动还款</p>
                </div>
                <div class="loan-ex-box-mini">
                    <label for="">还款方式</label>
                    <p>银行代扣：还款日当天08:00从绑定银行卡中自动扣款主动还款</p>
                </div>
            </div>
        </div>


        <div class="loan-qa">
            <div class="main-title">
                常见问题
            </div>
            <div class="conten">
                <div class="loan-qa-info">
                    <div>
                        <img src="../assets/img/dkxq-wen.png" alt="" srcset="">
                        <p>我是国企员工，工资打卡4000以上，工作5年了，信用卡有过逾期，能贷款吗？</p>
                    </div>
                    <div>
                        <img src="../assets/img/dkxq-da.png" alt="" srcset="">
                        <p>我是国企员工，工资打卡4000以上，工作5年了，信用卡有过逾期，能贷款吗？</p>
                    </div>
                </div>
            </div>
        </div> -->

        <div class="apply-btn" @click="nav_appDownload">立即申请</div>

        <mt-popup
        v-model="popupVisible"
        position="bottom"
        class="data-popup">

            <mt-picker :showToolbar='true' value-key='data' :slots="slots" @change="onValuesChange">

                <Slot class="picker-tool">
                    <span @click="over_picker">完成</span>
                </Slot>

            </mt-picker>

        </mt-popup>
    </div>
</template>

<script>

//底层
import Vue from 'vue';

//图表
import Vering from 'v-charts/lib/ring.common';
Vue.component(Vering.name, Vering);

//头部
import { Header,Button,Popup,Picker } from 'mint-ui';
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.component(Picker.name, Picker);

//惯性回弹滑动
import LyTab from 'ly-tab';
Vue.use(LyTab);

//下载头部
import download from '../components/Download';

export default {
    components:{ download },
    data(){
        this.colors = ['#FF9A26','#479EF8','#ff0000']
        this.chartSettings = {
            radius: [35, 50],
            label:{
                show:false
            },
            offsetY:80,
            legendLimit:0,
            hoverAnimation:false,
        }
        return{
            chartData: {
                columns: ['费用标题', '金额'],
                rows: [
                    { 
                        '费用标题': '利息和费用', '金额': 1393 ,
                    },
                    { 
                        '费用标题': '到账金额', '金额': 3530 ,
                    },
                    { 
                        '费用标题': '一次性费用', '金额': 300 ,
                    },
                ]
            },
            selectedId: 0,
            loan_money:100,
            popupVisible:false,
            slots: [
                {
                    values: [
                        {
                            data:'1',
                            value:'b'
                        },
                        {
                            data:'2',
                            value:'a'
                        },
                        {
                            data:'3',
                            value:'c'
                        },
                    ],
                    className: 'slot1',
                    textAlign: 'center'
                }
            ],
            change_v:[],
            loan_details:{},
            zl_loan_tag_str:[],
            loading:true,
            eavluate:0,//评分
            period:'',
            one_free:'',
            lx_free:'',
        }
    },
    mounted:function (){

        //取得?后面的参数
        var loan_id = this.$getUrlPara('id');

        //取得贷款详情
        this.$api.loan_details({
            loan_id:loan_id
        },e=>{

            //设置贷款详情
            this.loan_details = e;

            //设置初始贷款金额
            this.loan_money = e.min_loan_money;

            //整理标签数据
            var loan_tag_str = e.loan_tag_str;
            var zl_loan_tag_str = [];
            var tmp_tag_str = [];

            for(var i in loan_tag_str){
               
                if((parseInt(i)+1)%2==0){
                    tmp_tag_str.push(loan_tag_str[i]);
                }else{
                    zl_loan_tag_str.push(loan_tag_str[i]);
                }

            }

            //设置新的标签
            this.zl_loan_tag_str = [zl_loan_tag_str,tmp_tag_str];

            //计算评分
            var eavluate = e.agent_admin_info.evaluate_rate;
            if(eavluate==''||eavluate==0){
                this.eavluate = 0;
            }else{
                this.eavluate = eavluate*10;
            }

            //整理贷款期限数据
            this.slots[0].values=[];
            for(var i = e.max_period;i>=e.min_period;i--){

                i = parseInt(i);
                
                this.slots[0].values.push({
                    data:i+'个月',
                    value:i
                });

            };

            //设置默认期限
            this.period = e.min_period;

            //整理图片数据
            var loan_content_img = e.loan_content_img.split(',');
            this.loan_content_img = loan_content_img;

            //计算图表费用
            this.sChart(e.min_loan_money,e.min_period);

            //渲染页面
            this.loading = false;

        })
    },
    methods:{
        //计算图表费用
        sChart:function(m,y){

            //利息
            var l = this.loan_details.month_rate/100,

                //一次性费用
                one_free = this.loan_details.nonrecurring_rate/100;

            //单位转为元
            m= m*10000;

            //到账金额
            var all = m;

            //利息和费用
            var lx = 0;

            //计算利息
            for(var i =0 ; i<y ;i++){
                lx = lx + ( m - m / y * i ) * l;
            }

            //一次费用
            var one = m / 100 * this.loan_details.nonrecurring_rate;

            //保留两位小数
            lx = lx.toFixed(2);
            one = one.toFixed(2);

            //图表渲染
            this.chartData.rows= [
                                { 
                                    '费用标题': '利息和费用', '金额': lx ,
                                },
                                { 
                                    '费用标题': '到账金额', '金额': all ,
                                },
                                { 
                                    '费用标题': '一次性费用', '金额': one ,
                                },
                            ]
            
            //页面渲染
            this.one_free = one;
            this.lx_free = lx;
            this.all_free = all;

        },

        //点击单位
        f_money:function(){
            //聚焦输入框
            this.$refs.is_f_m.focus();
        },

        //用户输入结束
        money_our:function(){

            var max_loan_money = this.loan_details.max_loan_money;
            var min_loan_money = this.loan_details.min_loan_money;

            //是否为数字正则
            var re = /^[1-9]+[0-9]*]*$/;

            //去掉前面的0
            this.loan_money = this.loan_money.replace(/^0+/,"");

            //用户输入
            let loan_money = this.loan_money;

            //不是纯数字
            if(!re.test(loan_money)){

                this.loan_money = min_loan_money;

                this.$mint_ui.Toast('请输入正确的金额');

                this.sChart(this.loan_money,this.period);

                return;
            }
            
            //转为int
            max_loan_money = parseInt(max_loan_money);
            min_loan_money = parseInt(min_loan_money);
            loan_money = parseInt(loan_money);

            //是否在范围内
            if(!(max_loan_money>=loan_money&&loan_money>=min_loan_money)){
                
                if(loan_money>max_loan_money){
                    this.loan_money =max_loan_money;
                }else{
                    this.loan_money =min_loan_money;
                }

                this.$mint_ui.Toast('请输入正确的范围'+min_loan_money+'万元~'+max_loan_money+'万元');

                this.sChart(this.loan_money,this.period);

                return;

            }

            this.sChart(this.loan_money,this.period);

        },

        //显示日期选择
        popup_dis:function(){

            //设置选框显示
            this.popupVisible = true;

        },

        //选择日期
        onValuesChange:function(e){

            //储存用户选择
            this.change_v = e.getValues();

        },

        //完成
        over_picker:function(){

            //设置选框隐藏
            this.popupVisible = false;
            
            //取得用户选择
            let change_v = this.change_v;

             //设置用户选择
            this.period = change_v[0].value;

            this.sChart(this.loan_money,this.period);

        },

        nav_appDownload: function(){
            this.$router.push({ path: '/appDownload' })
        }
    }
}
</script>

<style lang="scss">
    .loan-info-page{
        padding-top: 1.4rem;
        padding-bottom: .98rem;

        .loan-info{
            padding: .30rem;
            background-color: #fff;
            margin: .24rem;
            position: relative;
            border-radius: .07rem;

            .loan-info-name{
                color: #323232;
                font-size: .32rem;
                display: flex;
                align-items: center;
                div{
                    width: .48rem;
                    height: .48rem;
                    background-color: #2047CB;
                    border-radius: .1rem;
                    margin-right: .12rem;
                }
            }
            .loan-number{
                display: flex;
                margin-top: .3rem;
                div {
                    width: 50%;
                    max-width: 50%;
                    min-width: 50%;
                    display: flex;
                    flex-direction: column;
                    span{
                        font-size: .24rem;
                        margin-bottom: .1rem;
                        color: #999;
                    }
                    i{
                        font-size: .36rem;
                        color: #333333;
                    }
                }
            }

            .loan-badge{

                background:rgba(48,126,234,0.06);
                padding: .3rem;
                margin-top: .3rem;
                padding-bottom: .1rem;
                display: flex;

                div{
                    width: 50%;
                    max-width: 50%;
                    min-width: 50%;
                    display: flex;
                    flex-direction: column;
                    img{
                        width: .22rem;
                        height: .22rem;
                        margin-right: .08rem;
                    }

                    span{
                        font-size: .24rem;
                        color: #999;
                        margin-bottom: .2rem;
                        display: flex;
                        align-items: center;
                    }
                    
                }

            }
        }


        .loan-mechanism{
            margin: 0 .24rem;
            margin-top: .2rem;
            background-color: #fff;
            border-radius: .07rem;
            p{
                height: 1rem;
                display: flex;
                align-items: center;
                padding: 0 .3rem;
                border-bottom: 1px solid $border-color;
                justify-content: space-between;
                span,b{
                    font-size: .3rem;
                }
                b{
                    position: relative;
                    input{
                        width: 2rem;
                        border: none;
                        text-align: right;
                    }

                    img{
                        width: .22rem;
                        height: .22rem;
                        position: absolute;
                        right: -0.1rem;
                        top: -0.2rem;
                    }
                }
            }

            .loan-mechanism-chart{
                display: flex;
                canvas{
                    height: 160px !important;
                    left: -.34rem !important;
                }
                .ve-ring{
                    width: 50% !important;
                    height: 160px !important;
                    &>div{
                        height: 160px !important;
                    }
                }
                .loan-cost{
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    color: #999;
                    span{
                        font-size: .22rem;
                        margin-bottom: .1rem;
                        display: flex;
                        align-items: center;
                        margin: .15rem 0;


                        i{
                            display: inline-block;
                            width: .12rem;
                            height: .12rem;
                            background-color: $border-color;
                            margin-right: .1rem;
                        }
                    }

                }
            }
        }
        .loan-slide{
            img{
                width: 480px;
            }
        }
        .ly-tab-item-label{
            margin-bottom: 5px !important;
        }
        .ly-tab{
            border-bottom: 0 !important;
        }

        
        .loan-process{

        }

        .loan-explain{
            background-color: #fff;
            .loan-explain-box{
                padding: .24rem;
                .loan-ex-box-mini{
                    margin-bottom: .35rem;
                    label{
                        font-size: .28rem;
                    }
                }
                .loan-ex-box-mini:last-child{
                    margin-bottom: 0rem;
                }
                img{
                    width: 100%;
                    display: block;
                }
                pre {
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    font-size: .22rem;
                }
            }
            p{
                color: #999;
                font-size: .28rem;
                margin-bottom: .1rem;
            }
        }


        .loan-qa-info{
            div{
                display: flex;
                img{
                    width: .4rem;
                    min-width: .4rem;
                    height: .4rem;
                    margin-right: .2rem;
                    position: relative;
                    top: .08rem;
                }
                margin-bottom: .5rem;
                p{
                    font-size: .28rem;
                }
            }
            div:last-child{
                margin-bottom: 0;
                p{
                    color: #999;
                }
            }
        }



        .adviser-list{
            padding: .24rem;
            border-bottom: 1px solid #eee;
            &>p{
                display: flex;
                align-items: center;
                font-size: .24rem;
                color: #999;
                padding-top: .2rem;
                margin-top: .3rem;
                border-top: 1px solid #eee;
                span{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: .2rem;
                    background-color: #FA5D5D;
                    color: #fff;
                    padding: .05rem .1rem;
                    border-radius: .07rem;
                    margin-right: .1rem;
                    min-width: 1.4rem;
                }
            }
            .adviser-list-info{
                display: flex;
                &>img{
                    width: 1.4rem;
                    height: 1.4rem;
                    border-radius: $radius;
                    margin-right: .24rem;
                }

                .adviser-info{
                    height: 1.4rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p{
                        display: flex;
                        align-items: center;
                        font-size: .32rem;
                        font-weight: bold;
                        img{
                            width: .32rem;
                            height: .32rem;
                            min-width: .32rem;
                            margin-left: .18rem;
                        }
                    }

                    .lable-list{
                        margin-bottom: .2rem;
                        span{
                            border: 1px solid $border-color;
                            padding: 0 .1rem;
                            font-size: .18rem;
                            border-radius: $radius;
                            color: #479EF8;
                            border-color: #479EF8;
                            height: .3rem;
                            line-height: .32rem;
                            display: inline-block;
                        }
                        span+span{
                            color: #30B849;
                            border-color: #30B849;
                        }
                        span+span+span{
                            color: #FA5D5D;
                            border-color: #FA5D5D;
                        }
                    }
                }


                .star{
                    .star-no{
                        width: 1.8rem;
                        height: .26rem;
                        background: url('../assets/img/pj-wuxingji.png');
                        background-size: cover;
                        position: relative;
                        i{
                            position: absolute;
                            right: -.4rem;
                            font-size: .24rem;
                            top: .03rem;
                            color: #E99318;
                        }
                    }
                    .star-yes{
                        width: 1.8rem;
                        height: .26rem;
                        background: url('../assets/img/pjiayxq.png');
                        background-size: cover;
                    }
                }
            }
        }


        .apply-btn{
            @include newC;
            height: .98rem;
            line-height: .98rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            color: #fff;
            font-weight: 500;
        }

        .data-popup{
            width: 100%;
        }


        .slot1{
            width: 100%;
        }


        .picker-tool{
            width: 100%;
            height: 100%;
            display: inline-block;
            position: relative;
            border-bottom: 1px solid #eee;
            span{
                display: flex;
                align-items: center;
                height: 100%;
                width: 20%;
                position: absolute;
                right: 0;
                top: 0;
                padding-right: .24rem;
                justify-content: flex-end;
                color: $main-color;
                font-size: .28rem;
            }
        }
    }
</style>



